<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%@ page import="com.qipay.baas.model.Cp" %>
<%@ page import="com.qipay.baas.model.CpAccount" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>向商户付款</title>
    <link rel="stylesheet" href="<%= request.getAttribute("StaticHost") %>/css/default.css">
    <link rel="stylesheet" href="<%= request.getAttribute("StaticHost") %>/css/scan.css">
</head>
<body>

<%
    String mchid = String.valueOf(request.getAttribute("mch_id"));
    String mchName = String.valueOf(request.getAttribute("mch_name"));
    String outTradeNo = String.valueOf(request.getAttribute("out_trade_no"));
    String body = String.valueOf(request.getAttribute("body"));
    String nonceStr = String.valueOf(request.getAttribute("nonce_str"));
    String sign = String.valueOf(request.getAttribute("sign"));
%>

<div class="layout-flex">
    <!-- content start -->
    <div class="content">
        <p class="sico_pay_p"><span class="sico_pay"></span></p>
        <div class="amount_title"><em>向</em><span><%= mchName %></span><em>付款</em></div>
        <div class="set_amount">
            <div class="amount_hd">消费总额</div>
            <div class="amount_bd">
                <i class="i_money">￥</i>
                <input value="" type="text" id="txtTotalFee">

                <!-- 清除按钮 -->
            </div>
        </div>
        <p class="remark"><span id="remarkBtn">付款备注</span></p>
    </div>
    <!-- content end -->

    <!-- 键盘 -->
    <div class="keyboard">

        <table class="key_table" id="keyboard">
            <tr>
                <td class="pay_btn disable" colspan="4" id="payBtn">付 款</td>
            </tr>
        </table>
    </div>

    <!-- 添加备注弹窗 -->
    <div class="pop-wrap none" id="remarkPop">
        <div class="pop_remark">
            <div class="pop_title">添加付款备注</div>
            <div class="input_wrap border b_all2">
                <input type="text" id="remarkInput" maxlength="60" placeholder="最多输入60个字符">
            </div>
            <div class="btn_wrap border b_top">
                <span id="remarkCancel">取消</span>
                <span class="border b_lft" id="remarkConfirm">确定</span>
            </div>
        </div>
    </div>
</div>

<div class="none">
    <input type="hidden" id="mchId" value="<%= mchid %>">
    <input type="hidden" id="sign" value="<%= sign %>">
    <input type="hidden" id="mchName" value="<%= mchName %>">
    <input type="hidden" id="outTradeNo" value="<%= outTradeNo %>">
    <input type="hidden" id="body" value="<%= body %>">
    <input type="hidden" id="nonceStr" value="<%= nonceStr %>">
</div>
<script src="http://amazeui.org/js/jquery.min.js"></script>
<script>

    $(function () {
        var mchid = $('#mchId').val();
        var sign = $('#sign').val();
        var mchName = $('#mchName').val();
        var outTradeNo = $('#outTradeNo').val();
        var body = $('#body').val();
        var nonceStr = $('#nonceStr').val();

        //$('#pay').click();

        var url = '<%= request.getContextPath()%>/common/cp/pay/qrcode';

        $('#payBtn').click(function () {
            var that = $(this);
            var txtTotalFee = $('#txtTotalFee').val();
            var remarkInput = $('#remarkInput').val();

            that.attr('disabled', 'disabled');

            if (isNaN(txtTotalFee)) {
                alert("消费总额只能输入数字");
                that.removeAttr('disabled');
                return;
            }

            $.ajax({
                url: url,
                type: "POST",
                data: {
                    "mch_id": mchid, "out_trade_no": outTradeNo, "body": body, "nonce_str": nonceStr, "sign": sign,
                    "total_fee": txtTotalFee, "mark": remarkInput
                },
                async: false,//true异步 false同步
                context: this,
                timeout: 10000,
                success: function (data) {
                    if (data && data.code == 1)
                        window.location = data.data;
                    else
                        alert(data.msg)
                },
                error: function (d, s, b) {
                    alert("支付失败:" + b);
                },
                always: function () {
                    that.removeAttr('disabled');
                }
            });
        });

    })

</script>
</body>
</html>